<template>
  <div class="app-container">
    <div id="content-main" style="width:600px;">
      <el-card shadow="never" class="box-card user-info">
        <div class="avatar-content">
          <div class="circle" @click="showChooseImg">
            <img :src="avatar" style="width:100px;height:100px"/>
          </div>
          <!-- <el-upload
            :file-list="fileList"
            :on-change="handleChange"
            :on-error="handleError"
            :on-success="handleSuccess"
            :before-upload="beforeAvatarUpload"
            :data="uploadData"
            :action="uploadPath"
            :headers="reqHeader"
            class="avatar-uploader">
            <img v-if="avatar" :src="avatar" title="点击上传头像" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"/>
          </el-upload> -->
        </div>
        <div class="user-info-content">
          <div>登录账号：{{ name }}</div>
          <div>注册时间：{{ createTime }}</div>
          <div>账号状态：<span style="color: #909399">正常</span></div>
        </div>
      </el-card>
      <el-card shadow="never" class="box-card reset-pass">
        <h4 class="account-label-icon">登录密码：</h4>
        <updatePass :id="id"/>
        <p>安全性高的密码可使账号更安全，建议设置同时包含字母，数字，符号的密码。</p>
      </el-card>

      <!-- <el-card shadow="never" class="box-card reset-email">
        <h4 class="account-label-icon">邮箱验证：</h4>
        <updateEmail :email="email"/>
        <p>你的邮箱：{{ formatEmail(email) }} </p>
        <h4>绑定邮箱可用于</h4>
        <ul>
          <li>安全管理，密码重置与修改</li>
          <li>账号使用，使用邮箱登录系统</li>
        </ul>
      </el-card> -->
    </div>
    <el-dialog :append-to-body="true" :visible.sync="showChooseAvatar" width="510px">
      <transition
        enter-active-class="fadeInDown"
        leave-active-class="fadeOutDown"
      >
        <div v-show="showChooseAvatar" class="default-img" style="display: inline;width:100%;">
          <img src="../../../assets/avatar/avatar01.png" alt="" width="100px" height="100px" style="margin:5px;border:1px solid #000;" @click="chooseImg(0)">
          <img src="../../../assets/avatar/avatar02.png" alt="" width="100px" height="100px" style="margin:5px;border:1px solid #000;" @click="chooseImg(1)">
          <img src="../../../assets/avatar/avatar03.png" alt="" width="100px" height="100px" style="margin:5px;border:1px solid #000;" @click="chooseImg(2)">
          <img src="../../../assets/avatar/avatar04.png" alt="" width="100px" height="100px" style="margin:5px;border:1px solid #000;" @click="chooseImg(3)">
          <img src="../../../assets/avatar/avatar05.png" alt="" width="100px" height="100px" style="margin:5px;border:1px solid #000;" @click="chooseImg(4)">
          <img src="../../../assets/avatar/avatar06.png" alt="" width="100px" height="100px" style="margin:5px;border:1px solid #000;" @click="chooseImg(5)">
          <img src="../../../assets/avatar/avatar07.png" alt="" width="100px" height="100px" style="margin:5px;border:1px solid #000;" @click="chooseImg(6)">
          <img src="../../../assets/avatar/avatar08.png" alt="" width="100px" height="100px" style="margin:5px;border:1px solid #000;" @click="chooseImg(7)">
          <img src="../../../assets/avatar/avatar09.png" alt="" width="100px" height="100px" style="margin:5px;border:1px solid #000;" @click="chooseImg(8)">
        </div>
      </transition>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import updatePass from './center/updatePass'
import { getToken } from '@/utils/auth'
import { updateAvatar } from '@/api/user'
import store from '@/store'
export default {
  name: 'Center',
  components: { updatePass },
  data() {
    return {
      showChooseAvatar: false,
      fileList: [],
      reqHeader: { 'Authorization': 'Bearer ' + getToken() },
      uploadPath: process.env.BASE_API + '/api/file/upload/',
      uploadData: {
        // file_type: 'NewsWordUpload'
        file_type: 'AvatarFiles'
      },
      // 图片列表，可以自己去网上下载几张想要的图片
      imgList: [
        '/image/avatar01.png',
        '/image/avatar02.png',
        '/image/avatar03.png',
        '/image/avatar04.png',
        '/image/avatar05.png',
        '/image/avatar06.png',
        '/image/avatar07.png',
        '/image/avatar08.png',
        '/image/avatar09.png'
      ]
    }
  },
  computed: {
    ...mapGetters([
      'id',
      'avatar',
      'name',
      'email',
      'createTime'
    ])
  },
  methods: {
    chooseImg(img) {
      const data = { avatar: this.imgList[img] }
      updateAvatar(data).then(res => {
        if (res.code === 200) {
          const newAvatar = process.env.BASE_API + '/media/' + this.imgList[img]
          store.dispatch('SetAvatar', newAvatar).then(() => {})
          this.$message({
            showClose: true,
            type: 'success',
            message: '上传成功!',
            duration: 2500
          })
        }
      }).catch(err => {
        console.log(err)
      })
      this.showChooseAvatar = false
    },
    showChooseImg() {
      this.showChooseAvatar = true
    },
    handleChange(file, fileList) {
      console.log(file)
    },
    handleSuccess(response, file, fileList) {
      if (response.code === 200) {
        const data = { avatar: response.data }
        updateAvatar(data).then(res => {
          if (res.code === 200) {
            fileList.push(response.data)
            const newAvatar = response.data
            store.dispatch('SetAvatar', newAvatar).then(() => {})
            this.$message({
              showClose: true,
              type: 'success',
              message: '修改成功!',
              duration: 2500
            })
          }
        }).catch(err => {
          console.log(err)
        })
      }
      // store.dispatch('GetInfo').then(() => {})
    },
    // 监听上传失败
    handleError(e, file, fileList) {
      Notification.error({
        title: '错误',
        message: '上传失败'
      })
    },
    beforeAvatarUpload(file) {
      const txt = file.type === 'txt'
      const isLt2M = file.size / 1024 / 1024 < 100

      if (txt) {
        Notification.error({
          title: '错误',
          message: '上传文件格式错误!'
        })
      }

      if (!isLt2M) {
        Notification.error({
          title: '错误',
          message: '上传附件大小不能超过 100MB!'
        })
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
  .box-card{border:0;border-bottom:1px solid #ECEDFE;border-radius:unset;h4{height:26px;margin:0 0 7px;line-height:26px;font-size:1.1rem;font-weight:500;color:#444242;display:inline-block}p{font-family:Lantinghei;font-size:90%;color:#747474}ul{padding:0;margin:7px 0 0;list-style:none;font-size:80%}li{float:left;margin:0 30px 10px 0!important}li:before{width:8px;height:8px;background-color:#52acd9;color:#52acd9;display:inline-block;border-radius:50%;margin-right:5px;content:'';box-sizing:border-box}}.user-info{height:170px}.reset-email{border-bottom:0}.avatar-content,.user-info-content{float:left}.user-info-content{font-family:Lantinghei;position:relative;font-size:14px;margin:25px;div{margin-bottom:15px}}.avatar-uploader-icon{font-size:28px;width:120px;height:120px;line-height:120px;text-align:center}.avatar{width:120px;height:120px;display:block;border-radius:50%}
</style>
